<template>
	<view class="all">
		<u-navbar>
			<view slot="default">
				<view class="soousuo">
					<image @click="so" style="width: 44rpx;height:44rpx ;margin-right: 10rpx;"
						src="@/static/img/search.png" mode=""></image>
					<input v-model="search" style="
					width: 100%;" type="text" value="" placeholder="教育未来的方向" />
				</view>
			</view>
			<view slot="right" @click="lenght=false" style="margin-right: 20rpx;">取消</view>
		</u-navbar>
		<view class="lishi" v-if="lenght">
			<view class="lishi_1">
				<my-text text='搜索内容' />
			</view>
			<view class="lishi_2">
				<view class="lishi_2_1" @click="submit('点击搜索',item)" v-for="(item,index) in info.search">
					<text class="lishi_2_1t" style="margin-right: 10rpx;">
						<text v-if="item.type!=0">{{item.curriculum_type_text}}</text>
						<text v-else>{{'商品'}}</text>
					</text>
					<text style="
					display: inline-block;
					height: 1rpx;
					background-color:#91969A;
					width: 40rpx;
					"></text>
					<text style="margin-left: 10rpx;">{{item.name}}</text>
				</view>
			</view>
		</view>


		<view class="lishi" v-if="!lenght">
			<view class="lishi_1">
				<my-text text='历史搜索' />
				<image @click="submit('删除')" style="width: 44rpx;height:44rpx " src="@/static/img/sc.png" />
			</view>

			<view class="lishi_2">
				<view class="lishi_2_1" v-for="(item,index) in info.history">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="lishi" v-if="!lenght">
			<view class="lishi_1">
				<my-text text='热搜' width="72rpx" />
				<!-- <image style="width: 44rpx;height:44rpx " src="@/static/img/sc.png" /> -->
			</view>

			<view class="lishi_21">
				<view style="margin-bottom: 40rpx;" v-for="(item,index) in info.hot_search">
					<view class="lishi_2_t">
						<text :class="{
							lishi_2_tall:true,
							lishi_2_t1:index==0,
							lishi_2_t2:index==1,
							lishi_2_t3:index==2,
							lishi_2_t4:index>=3,
						}">{{index+1}}</text>
						<text :class="{
						 	lishi_2_t4t:index>=3,
						 }">{{item.name}}</text>
					</view>
					<view class="xian" v-if="index!=6">
					</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				lenght: null,
				search: "",
				info: {},
				list: ['《刘伟•商鞅变法》', '《刘伟•商鞅变法对秦国的深远影响》', '《刘伟•商鞅变法对秦国的深远影响》',
					'《刘伟•商鞅变法》', '《刘伟•商鞅变法对秦国的深远影响》'
				],
			}
		},
		onLoad() {
			this.getinfo()
		},
		watch: {
			search(v) {
				let a = v.split('')
				this.lenght = a.length
				this.getinfo()
			}
		},
		methods: {
			submit(a, item) {
				if (a == '点击搜索') {
					this.$api('index/curClick', {
						cur_id: item.id
					}).then(res => {
						this.$luyou(item.type,item.id)

					})
				} else if (a == '删除') {
					this.$api('index/delsearch').then(res => {
						if (res.code == 1) {
							this.$toast(res.msg, 1)
							this.getinfo()
						} else {
							this.$toast(res.msg, 0)
						}
					})
				}
			},
			// so() {
			// 	let data = {
			// 		name: this.search
			// 	}
			// 	this.$api('index/search', data).then(res => {
			// 		this.info = res.data
			// 		console.log(JSON.stringify(this.info.search))
			// 		uni.navigateTo({
			// 			url: `./sousuohou?data=${JSON.stringify(this.info)}`
			// 		})
			// 	})
			// },
			getinfo() {
				let data = {
					name: this.search
				}
				this.$api('index/search', data).then(res => {
					this.info = res.data
				})
			}
		}
	}
</script>

<style lang='scss'>
	.lishi_2_t4t {
		color: #91969A !important;
	}

	.lishi_21 {
		padding: 0rpx 20rpx 20rpx 20rpx;

		.xian {
			width: 93%;
			margin-top: 20rpx;
			float: right;
			height: 1rpx;
			background-color: #E3E3E3;
		}

		.lishi_2_t {
			text:nth-of-type(2) {
				font-size: 29rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #131314;
				opacity: 1;
			}

			.lishi_2_t2 {
				background-color: rgb(255, 213, 0);
				color: white;
			}

			.lishi_2_t3 {
				background-color: rgb(238, 128, 26);
				color: white;
			}

			.lishi_2_t4 {
				background-color: rgba(145, 150, 154, 0.6);
				color: white;
			}

			.lishi_2_tall {
				display: inline-block;
				padding: 0rpx 8rpx 0rpx 8rpx;
				margin-right: 20rpx;
			}

			.lishi_2_t1 {
				background-color: rgb(255, 36, 36);
				color: white;
			}
		}
	}



	.lishi_2 {
		display: flex;
		flex-wrap: wrap;
		padding: 0rpx 20rpx 20rpx 20rpx;



		.lishi_2_1 {
			display: flex;
			align-items: center;
			margin-top: 10rpx;
			font-size: 24rpx;
			margin-right: 20rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #91969A;
			opacity: 1;
			height: 57rpx;
			background: #F5F5F5;
			padding: 10rpx 20rpx 10rpx 20rpx;
			opacity: 1;
			border-radius: 29px;
		}
	}

	.lishi {
		padding-left: 15rpx;
		padding-right: 15rpx;

		.lishi_1 {
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
		}
	}

	.soousuo {
		background-color: rgb(245, 245, 245);
		align-items: center;
		width: 561rpx;
		height: 68rpx;
		display: flex;
		border-radius: 50rpx;
		padding: 10rpx 0rpx 10rpx 20rpx;
	}
</style>
